<script setup>
import { ref } from 'vue'
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
// const handleSizeChange () => {
//   console.log(`${val} items per page`)
// }
// const handleCurrentChange = () => {
//   console.log(`current page: ${val}`)
// }
</script>

<template>
  <div class="paging">
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.paging{
  display: flex;
  margin: 10px;
  justify-content: flex-end;
}
el-pagination{
  justify-content: flex-end;
}
</style>